import React, { useEffect, Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF, useAnimations } from "@react-three/drei";

const Model = () => {
    const { scene, animations } = useGLTF('fbx/tt.glb')
    const { actions } = useAnimations(animations, scene)
    useEffect(() => {
        // 启动第一个动画（如果存在的话）
        const firstAnimation = Object.values(actions)[0];
        if (firstAnimation) {
            firstAnimation.play();
        }
    }, [actions]);
    return <primitive object={scene} position={[0,-1,0]}/>;
}
useGLTF.preload('/fbx/tt.glb')
const LeftPerson: React.FC = () => {
    return (
        <Canvas
            camera={{ position: [0, 0, 5], fov: 30 }}
            style={{
                height: "100%",
                width: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <ambientLight intensity={1} />
            <directionalLight intensity={1} />
            <Suspense fallback={null}>
                <Model />
            </Suspense>
            <OrbitControls />
        </Canvas>
    )
}
export default LeftPerson